<template>
  <view class="lite-tabs">
    <view class="lite-tabs__nav">
      <view 
        class="lite-tabs__item"
        :class="{ 'lite-tabs__item--active': current === index }"
        v-for="(item, index) in list"
        :key="index"
        @click="handleClick(item, index)"
      >
        <text class="lite-tabs__text" :style="getTextStyle(index)">
          {{ typeof item === 'string' ? item : item.name }}
        </text>
      </view>
    </view>
    <view 
      class="lite-tabs__line" 
      :style="lineStyle"
      v-if="lineWidth > 0"
    ></view>
  </view>
</template>

<script>
export default {
  name: 'LiteTabs',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    current: {
      type: Number,
      default: 0
    },
    activeStyle: {
      type: Object,
      default: () => ({})
    },
    inactiveStyle: {
      type: Object,
      default: () => ({})
    },
    lineWidth: {
      type: [String, Number],
      default: 30
    },
    lineColor: {
      type: String,
      default: '#007bff'
    }
  },
  computed: {
    lineStyle() {
      if (this.lineWidth <= 0) return {}
      
      const itemWidth = 100 / this.list.length
      const lineLeft = this.current * itemWidth + (itemWidth - this.lineWidth) / 2
      
      return {
        width: this.lineWidth + '%',
        height: '3px',
        backgroundColor: this.lineColor,
        position: 'absolute',
        bottom: '0',
        left: lineLeft + '%',
        transition: 'all 0.3s ease'
      }
    }
  },
  methods: {
    handleClick(item, index) {
      this.$emit('click', { item, index })
    },
    getTextStyle(index) {
      const isActive = this.current === index
      return {
        ...this.inactiveStyle,
        ...(isActive ? this.activeStyle : {}),
        color: isActive 
          ? (this.activeStyle.color || '#007bff')
          : (this.inactiveStyle.color || '#666666'),
        fontWeight: isActive 
          ? (this.activeStyle.fontWeight || 'bold')
          : (this.inactiveStyle.fontWeight || 'normal')
      }
    }
  }
}
</script>

<style scoped>
.lite-tabs {
  position: relative;
}

.lite-tabs__nav {
  display: flex;
  border-bottom: 1px solid #eee;
}

.lite-tabs__item {
  flex: 1;
  padding: 16px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.lite-tabs__item:hover {
  background-color: rgba(0, 123, 255, 0.1);
}

.lite-tabs__text {
  font-size: 14px;
  color: #666666;
  transition: all 0.3s ease;
}

.lite-tabs__item--active .lite-tabs__text {
  color: #007bff;
  font-weight: bold;
}

.lite-tabs__line {
  border-radius: 2px;
}
</style>